<template>
  <view class="tax">
    <form class="tax-form">
      <view class="mt48 form_item">
        <view class="title">输入金额</view>
        <input name="input" type="number" placeholder="0" v-model="oldTax" />
      </view>
      <view class="form_item">
        <view class="title">约定利率(%)</view>
        <input name="input" type="number" placeholder="0" v-model="appointTax" />
      </view>
      <view class="form_item">
        <view class="title">起算日期</view>
        <picker mode="date" :value="startDate" @change="startDateChange">
          <view class="picker">
            {{ startDate }}
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">截止日期</view>
        <picker mode="date" :value="endDate" @change="endDateChange">
          <view class="picker">
            {{ endDate }}
          </view>
        </picker>
      </view>
      <view class="form_item">
        <view class="title">倍率</view>
        <input name="input" type="number" placeholder="0" v-model="multiple" />
      </view>
    </form>
    <view v-if="resultShow" class="tax-result margin-top">
      <view class="tax-title">
        <text>
          计算结果：
        </text>
      </view>
      <view class="tax-text">
        <text>{{ startDate }}到{{ endDate }}之间共{{ overdueDays }}天</text>
        <text>利息为：{{ taxCount }}元</text>
      </view>
      <view class="tax-title margin-top-xl">
        <text>
          计算公式：
        </text>
      </view>
      <view class="overdue-text margin-top">
        <text>利息 = (本金 x 年利率 x 天数 x 倍数)/365</text>
      </view>
    </view>
    <view class="fotter">
      <view class="bottom-btn">
        <view class="reset-btn" @click="resetBtn">
          重 置
        </view>
        <view class="count-btn" @click="countBtn">
          计 算
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/lixi/index"></script>

<style lang="scss" scoped>
.tax {
  height: 100%;
  overflow-y: auto;

  .tax-result {
    padding: 0 30rpx;

    .tax-title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333;
    }

    .tax-text {
      margin-top: 30rpx;
      font-size: 32rpx;
      display: flex;
      flex-direction: column;

    }

    .overdue-text {
      display: flex;
      flex-direction: column;
      line-height: 56rpx;
      font-size: 32rpx;
    }
  }

  .form_item {
    background-color: #ffffff;
    padding: 1px 14px;
    display: flex;
    align-items: center;
    min-height: 48px;
    justify-content: space-between;
  }

  .fotter {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 160rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .bottom-btn {
      padding: 0 30rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .reset-btn {
        width: 220rpx;
        height: 90rpx;
        background-color: #f6f6f6;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
      }

      .count-btn {
        width: 440rpx;
        height: 90rpx;
        background-color: #2979ff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}</style>

